import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/Echarts',
        name: 'Echarts',
        component: () => import(/* webpackChunkName: "about" */ '../views/Echarts.vue')
    },
    {
        path: '/insertVal',
        name: 'InsertVal',
        component: () => import(/* webpackChunkName: "about" */ '../views/InsertVal.vue')
    },
    {
        path: '/DemoVbind',
        name: 'DemoVbind',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVbind.vue')
    },
    {
        path: '/DemoVif',
        name: 'DemoVif',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVif.vue')
    },
    {
        path: '/DemoVfor',
        name: 'DemoVfor',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVfor.vue')
    },
    {
        path: '/DemoVon',
        name: 'DemoVon',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVon.vue')
    },
    {
        path: '/DemoVmodel',
        name: 'DemoVmodel',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVmodel.vue')
    },
    {
        path: '/DemoProps',
        name: 'DemoProps',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoProps.vue')
    },
    {
        path: '/VforList',
        name: 'VforList',
        component: () => import(/* webpackChunkName: "about" */ '../views/VforList.vue')
    },
    {
        path: '/CountVfor',
        name: 'CountVfor',
        component: () => import(/* webpackChunkName: "about" */ '../views/CountVfor.vue')
    },
    {
        path: '/TestDemo',
        name: 'TestDemo',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestDemo.vue')
    },
    {
        path: '/DemoVshow',
        name: 'DemoVshow',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVshow.vue')
    },
    {
        path: '/DemoVhtml',
        name: 'DemoVhtml',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVhtml.vue')
    },
    {
        path: '/DemoComputed',
        name: 'DemoComputed',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoComputed.vue')
    },
    {
        path: '/VueCookieTest',
        name: 'VueCookieTest',
        component: () => import(/* webpackChunkName: "about" */ '../views/VueCookieTest.vue')
    },
    {
        path: '/DemoLocalStorage',
        name: 'DemoLocalStorage',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoLocalStorage.vue')
    },
    {
        path: '/DemoRefCom',
        name: 'DemoRefCom',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoRefCom.vue')
    },
    {
        path: '/DemoRoute',
        name: 'DemoRoute',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoRoute.vue')
    },
    {
        path: '/TestRoute',
        name: 'TestRoute',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestRoute.vue')
    },
    {
        path: '/DemoGoBack',
        name: 'DemoGoBack',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoGoBack.vue')
    },
    {
        path: '/DemoAxios',
        name: 'DemoAxios',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoAxios.vue')
    },
    {
        path: '/TestAxios',
        name: 'TestAxios',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestAxios.vue')
    },
    {
        path: '/DemoVuex',
        name: 'DemoVuex',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVuex.vue')
    },
    {
        path: '/TimeOut',
        name: 'TimeOut',
        component: () => import(/* webpackChunkName: "about" */ '../views/TimeOut.vue')
    },
    {
        path: "/DemoJq",
        name: 'DemoJq',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoJq.vue')
    },
    {
        path: "/LearnEs6Foreach",
        name: 'learn-es6-foreach',
        component: () => import(/* webpackChunkName: "about" */ '../views/learn-es6-foreach.vue')
    },
    {
        path: "/LearnEs6Map",
        name: 'LearnEs6Map',
        component: () => import(/* webpackChunkName: "about" */ '../views/LearnEs6Map.vue')
    },
    {
        path: "/DemoVtext",
        name: 'DemoVtext',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoVtext.vue')
    },
    {
        path: "/LearnEs6Set",
        name: 'LearnEs6Set',
        component: () => import(/* webpackChunkName: "about" */ '../views/LearnEs6Set.vue')
    },
    {
        path: "/es6Find",
        name: 'es6Find',
        component: () => import(/* webpackChunkName: "about" */ '../views/es6Find.vue')
    },
    {
        path: "/toggleTest",
        name: 'toggleTest',
        component: () => import(/* webpackChunkName: "about" */ '../views/toggleTest.vue')
    },
    {
        path: "/arrayFilter",
        name: 'arrayFilter',
        component: () => import(/* webpackChunkName: "about" */ '../views/arrayFilter.vue')
    },
    {
        path: "/DemoWatch",
        name: 'DemoWatch',
        component: () => import(/* webpackChunkName: "about" */ '../views/DemoWatch.vue')
    },
    {
        path: "/watchArrayList",
        name: 'watchArrayList',
        component: () => import(/* webpackChunkName: "about" */ '../views/watchArrayList.vue')
    },
    {
        path: "/TestMn",
        name: 'TestMn',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestMn.vue')
    },
    {
        path: "/LifeCycle",
        name: 'LifeCycle',
        component: () => import(/* webpackChunkName: "about" */ '../views/LifeCycle.vue')
    },

    // vue事件修饰符
    {
        path: "/TestEvent",
        name: 'TestEvent',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestEvent.vue')
    },
    //TestCalculator
    {
        path: "/TestCalculator",
        name: 'TestCalculator',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestCalculator.vue')
    },
    {
        path: "/KeepAliveTest",
        name:'KeepAliveTest',
        component: () => import(/* webpackChunkName: "about" */ '../views/KeepAliveTest.vue')
    },
    {
        path:'/TestLodash',
        name:'TestLodash',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestLodash.vue')
    },
    {
        path:'/TestStringUtil',
        name:'TestStringUtil',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestStringUtil.vue')
    },
    {
        path:'/Test3D',
        name:'Test3D',
        component: () => import(/* webpackChunkName: "about" */ '../views/Test3D.vue')
    },
    {
        path: '/StyleTest',
        name:'StyleTest',
        component: () => import(/* webpackChunkName: "about" */ '../views/StyleTest.vue')
    },
    {
        path: '/TestCssClass1',
        name:'TestCssClass1',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestCssClass1.vue')
    },
    {
        path: '/TestCssClass2',
        name:'TestCssClass2',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestCssClass2.vue')
    },
    {
        path: '/TestCssClass3',
        name:'TestCssClass3',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestCssClass3.vue')
    },
    {
        path: '/TestCssClass4',
        name:'TestCssClass4',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestCssClass4.vue')
    },
    {
        path: '/slot-test/parent',
        name:'slot-parent',
        component: () => import(/* webpackChunkName: "about" */ '../views/slot-test/parent')
    },
    {
        path: '/slot-name-test/parent',
        name:'slotParent2',
        component: () => import(/* webpackChunkName: "about" */ '../views/slot-name-test/slot-parent')
    },
    {
        path: '/slot-scope-test/parent',
        name:'slotScopeParent',
        component: () => import(/* webpackChunkName: "about" */ '../views/slot-scope-test/slot-scope-parent')
    },
    {
        path: '/com1Test',
        name:'com1Test',
        component: () => import(/* webpackChunkName: "about" */ '../views/test-com/com1-test')
    },
    {
        path: '/display',
        name:'display',
        component: () => import(/* webpackChunkName: "about" */ '../views/bus/display')
    },
    {
        path: '/ImageTest',
        name:'ImageTest',
        component: () => import(/* webpackChunkName: "about" */ '../views/ImageTest')
    },
    {
        path: '/compute-filter',
        name:'cf',
        component: () => import(/* webpackChunkName: "about" */ '../views/compute-filter')
    },
    {
        path: '/bind-class',
        name:'bcs',
        component: () => import(/* webpackChunkName: "about" */ '../views/bind-class')
    },
    {
        path: '/render-by-array',
        name:'rba',
        component: () => import(/* webpackChunkName: "about" */ '../views/render-by-array')
    },
    {
        path: '/render-by-object',
        name:'rbo',
        component: () => import(/* webpackChunkName: "about" */ '../views/render-by-object')
    },
    {
        path: '/cycle-render',
        name:'cren',
        component: () => import(/* webpackChunkName: "about" */ '../views/cycle-render')
    },
    {
        path: '/cycle-obj',
        name:'cob',
        component: () => import(/* webpackChunkName: "about" */ '../views/cycle-obj')
    },
    {
        path: '/TreeSelect',
        name:'TestTree',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestTree')
    },
    {
        path: '/TestRichEditor',
        name:'TestRichEditor',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestRichEditor')
    },
    {
        path: '/TestMarkDownEditor',
        name:'TestMarkDownEditor',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestMarkDownEditor')
    },
    {
        path: '/TestVueCodemirror',
        name:'TestVueCodemirror',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestVueCodemirror')
    },
    {
        path: '/TestDraggable',
        name:'TestDraggable',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestDraggable')
    },
    {
        path: '/TestVXE',
        name:'TestVXE',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestVXE')
    },
    {
        path: '/TestRegion',
        name:'TestRegion',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestRegion')
    },
    {
        path: '/TestIP',
        name:'TestIP',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestIP')
    },
    {
        path: '/TestBase64Pic',
        name:'TestBase64Pic',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestBase64Pic')
    },
    {
        path: '/TestImgChr',
        name:'TestImgChr',
        component: () => import(/* webpackChunkName: "about" */ '../views/TestImgChr')
    },
]






const router = new VueRouter({
    mode: 'history',  //去掉url中的#   history模式的路由
    routes
});
//全局前置守卫
router.beforeEach((to, from, next) => {
    // console.log('即将要进入的目标 路由对象')
    // console.log(to);
    // console.log('当前导航正要离开的路由')
    // console.log(from);
    next();


    //next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    //
    // next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    //
    // next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    //
    // next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    //
    // next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

});

//全局后置钩子
//全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
    console.log('=============================')
    console.log('即将要进入的目标 路由对象')
    console.log(to);
    console.log('当前导航正要离开的路由')
    console.log(from);
});

export default router
